<template>
    <view class="up-edit-container">
    	<view class="cuowu-icon-container iconfont icon-x" @click="closeBtn"></view>
    	<view class="edit-title-container">{{titleText}}</view>
		<view class="right-edit-btn-container" v-if="isShowRightBtn">
			<view class="right-edit-btn-bgc" @click="click">
				<view class="right-edit-btn-text">{{rightText}}</view>
			</view>
		</view>
    </view>
</template>

<script>
    export default {
		props: {			
			titleText: {
				type: String,
				default: '编辑',
			},			
			rightText: {
				type: String,
				default: '编辑',
			},
			isShowRightBtn: {
				type: Boolean,
				default: false,
			}
		},
        data() {
            return {
            }
        },
		methods: {
			/**
			 * x图标点击事件
			 */
			closeBtn() {
				this.$emit("closeBtn");
			},
			/**
			 * 右边点击事件
			 */
			click() {
				this.$emit("rightBtnCallback");
			}
		},
		mounted() {
		},
    }
</script>

<style lang="scss">
	// 错误图标，编辑标题 盒子
	.up-edit-container {
		width: 100%;
		height: 80rpx;
		display: flex;
		align-items: center;
		// padding: 0rpx 20rpx;
		position: relative;
		box-sizing: border-box;
		
		// 错误图标
		.cuowu-icon-container {
			width: 10%;
			height: 100%;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			font-size: 30rpx;
			color: #8b929d;
			position: absolute;
		}
		
		.edit-title-container {
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 35rpx;
			font-weight: bold;
		}
		
		.right-edit-btn-container {
			width: 20%;
			height: 100%;
			right: 0;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 30rpx;
			color: #8b929d;
			position: absolute;
			
			.right-edit-btn-bgc {				
				width: 80%;			
				height: 65%;
				background-color: $themeLightPurpleColor;
				display: flex;
				border-radius: 30rpx;
				justify-content: center;
				align-items: center;
				color: $themePurpleColor;
			}
		}
	}
</style>
